<template>
  <div class="el-space-parent" @click.stop="selectField">
    <draggable-list :widget="widget"></draggable-list>
  </div>

  <el-space @click.stop="selectField">
    <slot></slot>
    <template v-for="element in widget.widgetList" :key="element.id">
      <component :is="FieldComs[`${element.type}Widget`]" :widget="element">
        <template v-if="selectedId == element.id">
          <el-button-group class="controlGroupCom">
            <el-text type="primary">{{ element.type }}</el-text>
            <el-button :icon="Rank" class="drag-handler"></el-button>
            <el-button
              :icon="Delete"
              @click.stop="onClickDelete(widget.widgetList, index)"
              >33</el-button
            >
          </el-button-group>
        </template>
      </component>
    </template>
    <div></div>
  </el-space>
</template>

<script setup>
import {
  selectedId,
  onClickDelete,
  assignmentWidget,
} from "@/views/pageDesign/components/globalVariable";
import FieldComs from "@/views/pageDesign/components/centralRegion/index.js";
import draggableList from "@/components/draggableList";
import { Delete,Rank} from "@element-plus/icons-vue";

defineOptions({
  name: "colWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});

let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.el-space-parent,
.el-space {
  padding: 2px;
  // margin: 5px 10px;
  border: 1px dashed rgba(170, 170, 170, 0.75);
  min-height: 50px;
  width: 100%;
  // .el-space__item {
  //   width: 100px;
  //   height: 50px;
  // }
}
.el-space-parent {
  position: absolute;
  z-index: 2;
  opacity: 0;
}
.el-space {
  position: relative;
  // z-index: 10;
}
</style>
